import React from 'react';
import {StyleSheet, Text, Dimensions, View, Button, TouchableOpacity,FlatList} from 'react-native';
import {StackNavigator} from 'react-navigation';
import ChatScreen from './pages/friends/lucy.js';
import ChatThird from './pages/friends/third.js';
import lvtest from './pages/list/list.js';
import IndexList from './pages/index/indexList.js';
import SectionList from './pages/sectionList/Main.js';
import Alert from './pages/index/AlertMask.js';
import DataTest from './testJson/linkage.json';
const {width, height} = Dimensions.get('window');
class HomeScreen extends React.Component {
    static navigationOptions = {
        title: 'Welcome'
    };

    constructor(props) {
        super(props);

        this.state = {
            isHide: true,
            titles:'请选择省份',
            pTitles:'请选择省份',
            cTitles:'请选择城市',
            aTitles:'请选择区域',
            cId:1,
            aId:3
        };
        this.selectList=[{
            types:'p',
            id:'0',
            names:"pTitles",
            boxes:'alertBox',
            arrs:'dataArr',
            isHide:true
        },
        {
            types:'c',
            id:this.state.cId,
            boxes:'alertBox2',
            names:"cTitles",
            arrs:'dataArr1',
             isHide:true
         },
        {
            types:'a',
            id:this.state.aId,
            boxes:'alertBox3',
            names:'aTitles',
            arrs:'dataArr2', 
            isHide:true
        }]
        this.dataArr=[];
        this.dataArr2=[];
        this.dataArr1=[];
    }
     
    render() {
        const {navigate} = this.props.navigation;
        return (
            <View>
                <TouchableOpacity style={styles.whiteButton} onPress={() => navigate('IndexList')}>
                    <Text style={styles.textStyles}>Hello, Chat App!</Text>
                </TouchableOpacity>
                <TouchableOpacity style={styles.whiteButton} onPress={() => navigate('Chat', {users: 'cherry'})}>
                    <Text style={styles.textStyles}>ToChat!</Text>
                </TouchableOpacity>
                 <FlatList
                    ref='flatLists'
                    data={this.selectList}
                    extraData={this.state}
                    keyExtractor={this._keyExtractor}
                    renderItem={({item}) => this.renderRows(item)}
                />

                <Alert ref="alertBox" dataArr={this.dataArr} isHide={this.state.isHide} 
                    onSelectedItem={(item)=>{
                    this.setCitysData(item,'p');
                }}/>
                 <Alert ref="alertBox2"  isHide={this.state.isHide} 
                    onSelectedItem={(item)=>{
                    this.setCitysData(item,'c');
                }}/>
                <Alert ref="alertBox3"  isHide={this.state.isHide} 
                    onSelectedItem={(item)=>{
                    this.setCitysData(item,'a');
                }}/>

            </View>
        );
    }

    _keyExtractor=(item,index)=>item.id
    renderRows(items){
        return (
            <View style={styles.listContainer}>
                <TouchableOpacity style={styles.whiteButton} onPress={() => {
                    
                    this.checkedCities(items.types);
                }}>
               
                <Text style={styles.textStyles}>{this.state[items.names]}</Text>
                </TouchableOpacity>

            </View>
        )
    }

    checkedCities(type) {
        var vm=this,
            _cid=this.state.cId,
            _aid=this.state.aId;

            vm.setState({isHide:false});

            switch (type){
                case "p":  
                   
                   DataTest.PROVINCE.forEach((item,index)=>{
                        if(item.pId=="0"){
                            vm.dataArr.push(item);
                        }
                    })
                    this.refs.alertBox.show("请选择省份",vm.dataArr);
                break;
                case "c":
                
                    DataTest.PROVINCE.forEach((item,index)=>{
                        if(_cid==item.pId){
                            vm.dataArr1.push(item);
                        }
                    })
                    this.refs.alertBox2.show("请选择城市",vm.dataArr1);
                break;
                case "a":
                    DataTest.PROVINCE.forEach((item,index)=>{
                        if(item.pId==_aid){
                            vm.dataArr2.push(item);
                        }
                    })
                    this.refs.alertBox3.show("请选择区域",vm.dataArr2);
                break;
            }

    }

    setCitysData(item,t) {
        var vm=this;

        vm.setState({
            isHide:true
        })
        switch(t){
            case "p":
                vm.setState({
                    pTitles:item.name,
                    cId:item.id
                })
            
                vm.dataArr=[];
                this.refs.alertBox.out();
            break;
            case "c":
                 vm.setState({
                    cTitles:item.name,
                    aId:item.id
                 })
                vm.dataArr1=[];
                this.refs.alertBox2.out();
            break;
            case "a":
                 vm.setState({
                    aTitles:item.name
                 })
                 vm.dataArr2=[];
                 this.refs.alertBox3.out();
            break;

        }
       
       
    }
}


const SimpleApp = StackNavigator({
    Home: {screen: HomeScreen},
    Chat: {screen: ChatScreen},
    Third: {screen: ChatThird},
    List: {screen: lvtest},
    IndexList: {
        screen: IndexList
    },
    SectionList: {
        screen: SectionList
    }
});

export default class App extends React.Component {
    render() {
        return <SimpleApp />;
    }
}


const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#fff',
        alignItems: 'center',
        justifyContent: 'center'
    },
    whiteButton: {
        marginTop:10,
        height: 30,
        width: width,
        paddingLeft:10,
        paddingTop:5,
        backgroundColor: '#FFF'
    },


    textStyles: {
        height: 30,
        paddingLeft: 10
    },
    listContainer:{
        flexDirection:'row',
        alignItems:'center',
        justifyContent:'flex-start'
    }
});